<template>
  <div>
    <!-- <springPetal ref="springPetal"></springPetal> -->

    <div class="nav">
      <div style="display: flex; width: 1200px; margin: auto">
        <div style="flex: 5">
          <menuTree ref="menuTree"></menuTree>
        </div>
        <div style="flex: 1">
          <el-dropdown>
            <el-link :underline="false" style="color: #fff; line-height: 60px">
              欢迎回来！ {{ username }}
            </el-link>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="exitFn">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <div
            style="
              display: inline-block;
              padding: 15px 0 0 0;
              margin-left: 10px;
            "
          >
            <el-tooltip class="box-item" effect="light" placement="bottom">
              <template #content>
                <div
                  style="
                    height: 50px;
                    width: 200px;
                    font-size: 16px;
                    padding: 20px;
                  "
                >
                  <div>您好： {{ username }}</div>
                  <div style="color: #f5c100; padding: 20px 0 10px 0">
                    余额：
                    <span style="font-size: 18px; color: red"
                      >￥{{ $thousands2(this.$store.state.price) }}
                    </span>
                  </div>
                </div>
              </template>
              <el-button link style="padding: 0">
                <el-icon style="" size="20px" color="#FFDE5D"
                  ><Wallet
                /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <div style="position: relative; z-index: 999">
      <router-view></router-view>
    </div>
  </div>
</template>

<script type="link">
// import springPetal from '@/components/springPetal.vue'; // 春天
import menuTree from '@/components/menuTree.vue';
export default {
  components: {
    // springPetal,
    menuTree
  },
  data () {
    return {
      active: '1',
      username: ''
    };
  },
  mounted () {
    this.username = sessionStorage.getItem('username')
    this.$store.actions.fetchData();
  },
  methods: {
    exitFn () {
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
.nav {
  background-color: pink;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
